<template>
	<!-- 当mescroll-body写在子组件时,父页面需引入mescroll-comp.js的mixins -->
	<mescroll-body ref="mescrollRef" @init="mescrollInit"  @down="downCallback" @up="upCallback"
		:up="upOption" :down="downOption" v-if="hasData">
		<!-- 数据列表 -->
		
		<view class="more-products">
			<view class="title">更多宝贝</view>
			<view class="list">
				<view class="list-item" v-for="(item,index) in goodsList" :key="index">
					<router-link :to="{path:'/pages/goods_details/goods_details',query:{id:item.id}}">
					<image class="thumb" mode="aspectFill" :src="item.image"></image>
					<view class="product-title">{{item.name}}</view>
					<view class="subtitle">{{item.remark}}</view>
					<view class="con">
						<view class="price">￥{{item.min_price}}</view>
						<view class="buy-num">{{item.sales_virtual}}+ 人付款</view>
					</view>
					</router-link>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getGoodsListColumn,
		getGoodsColumn,
		getGoodsList
	} from "@/api/store"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		props:{
			autoGetData: {
				type: Boolean,
				default:true
			} 
		},
		data() {
			return {
				goodsList: [],
				active: 0,
				
				upOption: {
					auto: false,
					offset:200,
					empty: {
						icon: `${this.$imgUrl}/wechat/static/images/goods_null.png`,
						tip: "暂无商品",
					}
				},
				downOption:{use: false, isLock: true},
				hasData: true
			}
		},
		mounted() {
			if(this.autoGetData) {
				this.getData()
			}
		},
		methods: {
			async getData() {
				await this.getGoodsColumnFun()
				this.mescroll.resetUpScroll();
			},
			
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				getGoodsList({
					page_size: pageSize,
					page_no: pageNum,
					
				}).then(({
					data
				}) => {
					
					let curPageData = data.lists;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.goodsList = [];
					this.goodsList = this.goodsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			async getGoodsColumnFun() {
				const {
					data,
					code
				} = await getGoodsColumn()
				if (code == 1) {
					this.columnList = data
					this.hasData = data.length ? true : false
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.more-products{
		margin:30rpx 20rpx;
		
		.title{
			font-size:36rpx;
			text-align:center;
			width:100%;
			margin-bottom:30rpx;
		}
		.list{
			display:flex;
			flex-wrap:wrap;
			align-items: center;
			
			justify-content:space-between;
			.list-item{
				width:48.5%;
				background:#fff;
				padding-bottom:20rpx;
				margin-bottom:20rpx;
				.thumb{
					width:85%;
					height:180px;
					
					margin:0 auto;
					display:block;
				}
				.product-title{
					font-size:30rpx;
					margin-top:10rpx;
					padding-left:20rpx;
					overflow: hidden;
					    -webkit-line-clamp: 2;
					    text-overflow: ellipsis;
					    display: -webkit-box;
					    -webkit-box-orient: vertical;
				}
				.subtitle{
					color:#2E8B47;
					font-size:26rpx;
					padding-left:20rpx;
				}
				.con{
					display:flex;
					align-items: center;
					padding-left:20rpx;
					margin-top:16rpx;
					display:flex;
					align-items: center;
					justify-content: space-between;
					padding-right:20rpx;
					.price{
						color:#ff5411;
					}
					.buy-num{
						font-size:26rpx;
					}
					
				}
			}
			
		}
	}
	
</style>
